<template>
<div v-if="viewLoading" class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head"><p>{{ $route.meta.title }}</p></div>

  <div class="ivu-card-body">
    <iForm ref="formRef" :model="formFields" :rules="rules" :label-width="100">

      <FormItem prop="bank_name" label="银行名称：">
        <Input v-model="formFields.bank_name" placeholder="银行名称"/>
      </FormItem>

      <FormItem prop="account" label="开户姓名：">
        <Input v-model="formFields.account" placeholder="开户姓名"/>
      </FormItem>

      <FormItem prop="bank_account" label="银行账号：">
        <Input v-model="formFields.bank_account" placeholder="银行账号"/>
      </FormItem>

      <FormItem prop="bank_address_detail" label="支行地址：">
        <Input v-model="formFields.bank_address_detail" placeholder="支行地址"/>
      </FormItem>

      <FormItem>
        <Button type="primary" :loading="submitLoading" @click="onSubmit">{{ $route.meta.title }}</Button>
        <Button type="ghost" @click="$router.go(-1);">返回</Button>
      </FormItem>
    </iForm>
  </div>
</div>
</template>
<script>
import qs from 'qs';
import { Form, Input, Button, Select, Option, Message } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import auth from '@/utils/auth';

export default {
  components: {
    [Form.name]: Form,
    [Form.Item.name]: Form.Item,
    [Input.name]: Input,
    [Button.name]: Button,
    [Select.name]: Select,
    [Option.name]: Option
  },
  data() {
    return {
      token: auth.getToken(),
      viewLoading: false,
      submitLoading: false,
      pAccount: '',
      formFields: {
        bank_name: '',
        account: '',
        bank_account: '',
        bank_address_detail: ''
      },
      rules: {
        bank_name: [
          {type:'string', required: true, message: '请输入银行名称!', trigger: 'blur'}
        ],
        account: [
          {type:'string', required: true, message: '请输入开户姓名!', trigger: 'blur'}
        ],
        bank_account: [
          {type:'string', required: true, message: '请输入银行账号!', trigger: 'blur'}
        ],
        bank_address_detail: [
          {type:'string', required: true, message: '请输入支行地址!', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    _initialize() {
      
      this.getData();
    },
    getData() {
      let _this = this;

      ajaxiView.get('/backstage/system/parameter/ACCOUNT_BACKSTAGE_BANK_INFO?token='+_this.token).then(function(data) {
        if(data !== false) {
          for(var i in _this.formFields) {
            _this.formFields[i] = data.model.value[i];
          }

          _this.viewLoading = true;
        }
      });
    },
    onSubmit() {
      var _this = this;
      _this.$refs.formRef.validate((valid) => {
        _this.submitLoading = true;
        if(valid) {
          ajaxiView.put('/backstage/system/parameter/ACCOUNT_BACKSTAGE_BANK_INFO?token='+_this.token, qs.stringify(_this.formFields)).then(function(data) {
            if(data !== false) {
              Message.success({
                content: data.msg,
                onClose: function() {
                  window.location.reload();
                }
              });
            }

            _this.submitLoading = false;
          });
         _this.submitLoading = false;
        } else {
          _this.submitLoading = false;
        }
      });
    }
  },
  mounted() {
    this._initialize();
  }
}
</script>
